<template>
    <div class="write-info">
        <nut-form>
            <nut-form-item label="头像" class="info-btn flex-a">
                <nut-button openType="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <nut-avatar size="mini" bg-color="#ffff">
                        <img style="width:32px;height:32px;" :src="avatarUrl" />
                    </nut-avatar>
                </nut-button>
                <Right />
            </nut-form-item>
            <nut-form-item label="用户ID">
                <nut-input v-model="userNo" readonly class="nut-input-text readonly" />
            </nut-form-item>
            <nut-form-item label="昵称">
                <nut-input v-model="nickname" type="nickname" :autofocus="focus" @update:model-value="getNickname"
                    @blur="onblur" class="nut-input-text" placeholder="请输入昵称" />
            </nut-form-item>
            <nut-form-item label="手机号">
                <nut-input v-model="phone" readonly type="number" class="nut-input-text readonly"
                    placeholder="请输入手机号" />
            </nut-form-item>
        </nut-form>
        <div class="save-info">
            <nut-button shape="square" type="info" :loading="loading" color="#8DCF00" @click="saveInfo">保存</nut-button>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Right } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted, onUnmounted } from 'vue';
import { uploadInfo } from '../../../../api/index'
import { uploadUrl } from '../../../../utils'
export default {
    components: {
        Right
    },
    setup() {
        const data = reactive({
            avatarUrl: 'https://cxj.szzkba.cn/up/uploadPath/icon/user.png',
            nickname: '',
            phone: '',
            userNo: '',
            focus: false,
            loading: false
        });
        const onChooseAvatar = (e) => {
            data.avatarUrl = e.detail.avatarUrl
            Taro.uploadFile({
                url: uploadUrl, //仅为示例，非真实的接口地址
                filePath: e.detail.avatarUrl,
                name: 'file',
                success(res) {
                    let state = JSON.parse(res.data)
                    if (state.code == 200) {
                        data.avatarUrl = state.url
                    }
                }
            })
        }
        const saveInfo = () => {
            data.loading = true
            uploadInfo({ nickName: data.nickname, introduceSign: data.avatarUrl }).then(res => {
                if (res.resultCode == 200) {
                    data.loading = false
                    Taro.showToast({
                        title: '保存成功',
                        icon: 'success',
                        duration: 2000
                    })
                    Taro.getStorage({
                        key: 'user',
                        success: function (res) {
                            let user = res.data
                            user.nickName = data.nickname
                            user.introduceSign = data.avatarUrl
                            Taro.setStorage({
                                key: "user",
                                data: user
                            })
                        }
                    })
                    Taro.redirectTo({ url: '/packageA/pages/mypage/index' })
                }
            })
        }
        const getNickname = () => {
            data.focus = true
        }
        const onblur = (e) => {
            data.nickname = e.detail.value
        }
        const handleChangeInput = (e) => {
            data.nickname = e.cacheTarget.value;
        };
        onUnmounted(() => {
            Taro.redirectTo({ url: '/packageA/pages/mypage/index' })
        });
        onMounted(() => {
            data.focus = false
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.phone = res.data.phone
                    data.avatarUrl = res.data.introduceSign
                    data.nickname = res.data.nickName
                    data.userNo = res.data.userNo
                }
            })
        });

        return {
            ...toRefs(data), saveInfo, onChooseAvatar, getNickname, handleChangeInput, onblur
        }
    }
};
</script>


<style lang="scss">
.write-info {
    .nut-cell {
        .nut-cell {
            padding: 0;
        }
    }

    .readonly {
        color: gray;
    }

    .info-btn {
        .nut-button {
            width: 80rpx;
            height: 65rpx;
            border: none;
            border-radius: 0;
            background: transparent;
            margin-left: 350rpx;
            padding: 40rpx 0;
        }
    }
}

.save-info {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    width: 100%;
    text-align: center;

    .nut-button {
        width: 400rpx;
        margin: 0 auto;
        border-radius: 10rpx;
        white-space: nowrap;
    }
}
</style>